El siguiente fragmento representa una tienda Pinia en mi aplicación Vue 3/Quasar 2. Esta tienda utiliza la variable de entorno VUE_APP_BACKEND_API_URL que se leerá desde el objeto de window o desde process.env .
Sin embargo, no entiendo por qué la primera variante funciona pero la segunda no. El uso de la función getEnv siempre da como resultado un error Uncaught (in promise) ReferenceError: process is not defined .
import { defineStore } from 'pinia'; function getEnv(name) { return window?.appConfig?.[name] || process.env[name]; } // 1. this is working const backendApiUrl = window?.appConfig?.VUE_APP_BACKEND_API_URL || process.env.VUE_APP_BACKEND_API_URL; // 2. this is NOT working const backendApiUrl = getEnv('VUE_APP_BACKEND_API_URL'); export const useAppConfigStore = defineStore('appConfig', { state: () => ({ authorizationUrl: new URL( '/oauth2/authorization/keycloak', backendApiUrl, ).toString(), logoutUrl: new URL('/logout', backendApiUrl).toString(), backendApiUrl: new URL(backendApiUrl).toString(), }), });Las cosas específicas de NodeJS, como process , no existen en los entornos del navegador. Las implementaciones de Webpack y Vite funcionan reemplazando las expresiones process.env.XYZ con sus valores en tiempo de compilación . Por lo tanto, no se reemplazará solo process.env o process.env[name] , lo que conducirá a los errores que está experimentando. Consulte la sección deadvertencias y los documentos y recursos relacionados con Webpack/Vite. Entonces, desafortunadamente, la única forma fácil parece ser la primera forma larga y repetitiva que haya probado ( const backendApiUrl = window?.appConfig?.VUE_APP_BACKEND_API_URL || process.env.VUE_APP_BACKEND_API_URL; ). Puede intentar incrustar esta lógica en un solo objeto y luego usar la función para acceder a ella.
const config = { VUE_APP_BACKEND_API_URL: window?.appConfig?.VUE_APP_BACKEND_API_URL || process.env.VUE_APP_BACKEND_API_URL } export function getEnv(name) { return config[name]; }De esta manera será más largo y repetitivo definirlo la primera vez, pero al menos podrás usarlo fácilmente a través del código base.